<template>
	<view class="Price-Breakdown">
		<view class="title">
			价格明细
		</view>
		<view class="price-content">
			<view class="text">
				<text>套餐总价</text>
				<text>￥{{orderinfo.cost_final}}/人</text>
			</view>
			<view class="text">
				<text>出行人数</text>
				<text>{{orderinfo.peoples}}</text>
			</view>
			<view class="text">
				<text>行程日期</text>
				<text>{{orderinfo.startToEnd}}</text>
			</view>
			<!-- 	<view class="text">
				<text>限时优惠券</text>
				<text>-￥500</text>
			</view> -->
			<view class="text">
				<text>房间数量</text>
				<text>{{RoomCount}}间</text>
			</view>
			<view class="text">
				<text>房差费用</text>
				<text>￥{{DifferenceRate}}</text>
			</view>
		</view>
		<view class="all-price">
			<view class="text">
				<text>行程总价</text>
				<text>￥{{FinalPrice}}</text>
			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue';
	// 计算最终的房差费
	const DifferenceRate = ref(0)
	const FinalPrice = ref(0); // 行程总价
	const props = defineProps({
		peopleNumber: {
			type: Number,
			default: 2
		},
		orderinfo: {
			type: Object,
			default: () => {}
		},
		RoomCount: {
			type: Number,
			default: 0
		},
		roomValue: {
			type: Array,
			default: () => []
		},
		singleDifferenceRate:{
			type: Number,
			default: 0
		}
	})
	const emits = defineEmits(['finalPriceChange']);

	//监听房间数量
	watch(() => props.RoomCount, (newVal) => {
		console.log('newValRoomCount===>', newVal);
	})
	//监听房间最终数据
	// watch(() => props.roomValue, (newVal) => {
	// 	console.log('newValroomValue===>', newVal);
	// 	//计算差价
	// 	DifferenceRate.value = newVal.reduce((total, room) => {
	// 		if (room.selectedItems.length < 2) {
	// 			return total + props.singleDifferenceRate
	// 		}
	// 		return total
	// 	}, 0)
	// 	// 计算最终行程总价
	// 	calculateFinalPrice();
	// }, {
	// 	deep: true
	// })
	// 监听房间最终数据
	watch(() => props.roomValue, (newVal) => {
	    console.log('newValroomValue===>', newVal);
	    // 计算总出行人数
	    const totalTravelers = newVal.reduce((total, room) => total + room.selectedItems.length, 0);
	    
	    // 判断如果总出行人数为1，则不计算房差费用
	    if (totalTravelers === 1) {
	        DifferenceRate.value = 0;
	    } else {
	        // 否则按照现有逻辑计算房差费用
	        DifferenceRate.value = newVal.reduce((total, room) => {
	            if (room.selectedItems.length < 2) {
	                return total + props.singleDifferenceRate;
	            }
	            return total;
	        }, 0);
	    }
	
	    // 计算最终行程总价
	    calculateFinalPrice();
	}, {
	    deep: true
	})
	// const calculateFinalPrice = () => {
	// 	if (props.orderinfo.cost_final && props.orderinfo.peoples) {
	// 		FinalPrice.value = props.orderinfo.peoples * props.orderinfo.cost_final + DifferenceRate.value;
	// 		emits('finalPriceChange',FinalPrice.value,DifferenceRate.value)
	// 	}
	// }
	const calculateFinalPrice = () => {
	    if (props.orderinfo.cost_final && props.orderinfo.peoples) {
	        // 如果总出行人数为1，则不加上房差费用
	        const basePrice = props.orderinfo.peoples * props.orderinfo.cost_final;
	        FinalPrice.value = props.orderinfo.peoples === 1 ? basePrice : basePrice + DifferenceRate.value;
	        emits('finalPriceChange', FinalPrice.value, DifferenceRate.value);
	    }
	}
	// 监听 orderinfo 数据变化，实时更新总价
	watch(
		() => props.orderinfo,
		() => {
			calculateFinalPrice();
		}, {
			deep: true
		}
	);
</script>

<style scoped>
	.Price-Breakdown {
		width: 94%;
		margin: 0 auto;
		border-radius: 10.76rpx;
		background: rgba(255, 255, 255, 1);
		padding: 16rpx 18rpx;
		box-sizing: border-box;
	}

	.Price-Breakdown .title {
		font-size: 34rpx;
		font-weight: 400;
	}

	.price-content {
		width: 90%;
		margin: 20rpx auto;
		display: flex;
		flex-direction: column;
		gap: 24rpx;
		border-bottom: 1rpx solid rgba(38, 38, 46, 0.1);
		padding: 0 0 26rpx 0;
		box-sizing: border-box;
	}

	.text {
		display: flex;
		justify-content: space-between;
	}

	.text text {
		font-size: 26rpx;
		font-weight: 400;
		color: rgba(56, 56, 56, 1);
	}

	.all-price {
		width: 90%;
		margin: 26rpx auto;
	}
</style>